home *** CD-ROM | disk | FTP | other *** search
/ Developer CD Series 1992 June: ROMin Holiday / ADC Developer CD (1992-06) (''ROMin Holiday'')_iso / Developer Connection - 06-1992.iso / Development Platforms / Apple II / Essentials / Human.Int.Notes / HIN.009 < prev    next >
Encoding:
Text File  |  1990-06-19  |  6.1 KB  |  134 lines  |  [TEXT/pdos]
  1. Human Interface Note #8    
  2. _____________________________________________________________________________
  3.  
  4. Note #9    Pop-Up Menus
  5.  
  6.            Written by:    Scott Jenson & John Sullivan              June 1990
  7. _____________________________________________________________________________
  8.  
  9. A description of the new style of pop-up menus.
  10. _____________________________________________________________________________
  11.  
  12.  
  13. Introduction
  14.  
  15. Pop-up menus have been around on the Macintosh since HFS (Hierarchical 
  16. File System) was introduced in 1986, and their use became much more 
  17. widespread after the addition of Toolbox support in 1987.  It is 
  18. surprising, then, that many Macintosh users have no idea what pop-up 
  19. menus are and do not recognize them when they see them.  The problem is 
  20. that pop-up menus do not look sufficiently different from other 
  21. Macintosh interface elements; the one-pixel drop shadow that 
  22. differentiates pop-up menus from editable text fields has proven 
  23. inadequate.  This Note presents the new standard appearance for the pop-
  24. up menu in System Software 7.0 and also describes how the new appearance 
  25. lends itself to some new uses that were previously impossible.
  26.  
  27.  
  28. Standard pop-up menus
  29.  
  30. Previously, pop-up menus were displayed by surrounding the current value 
  31. of the menu with a one-pixel rectangle and a one-pixel drop shadow to 
  32. the right and bottom.  The new standard appearance adds a downward-
  33. pointing black arrow, which is identical to the arrow that indicates 
  34. that a menu is too long to fit on the screen and must scroll.  All pop-
  35. up menus should now use this new style.  Figure 1 shows a simple pop-up 
  36. menu in both the old and new styles.
  37.  
  38.  
  39.                  |--------||          |----------||
  40.            Baud: | 1200   ||    Baud: | 1200  \/ ||
  41.                  |========||          |==========||
  42.                   Old Style             New Style
  43.  
  44.          Figure 1-Old-style and new-style pop-up menus
  45.  
  46. Figure 2 shows an expanded view of the downward-pointing black arrow of 
  47. this new-style pop-up menu.
  48.  
  49.                   *********************************
  50.                                                   **
  51.                         **                        **
  52.                         **                        **
  53.                      *****         *********      **
  54.                     **  **          *******       **
  55.                     **  **           *****        **
  56.                     **  **            ***         **
  57.                      *****             *          **
  58.                                                   **
  59.                   **********************************
  60.  
  61.             Figure 2-FatBits view of new-style pop-up menu
  62.  
  63. When the user clicks on the pop-up menu or its label text, the black 
  64. arrow disappears and the menu pops up, and when the user releases the 
  65. mouse button, the menu disappears and the black arrow is redrawn.  
  66. Figure 3 illustrates the proper behavior of a pop-up menu when a user 
  67. clicks on it.
  68.  
  69.                                       |----------||
  70.                                       |   50     ||
  71.                                       |  300     ||
  72.                                       |  600     ||
  73.                  |--------||   +++++++|++++++++++||
  74.            Baud: | 1200   ||   +Baud:+|+1200+++++||
  75.                  |========||   +++++++|++++++++++||
  76.                                       | 2400     ||
  77.                                       | 4800     ||
  78.                                       | 9600     ||
  79.                                       |==========||
  80.  
  81.         Figure 3-Pop-up menu before and during a mouse click
  82.  
  83.  
  84. Pop-up menus with editable text fields
  85.  
  86. Sometimes it is useful to display a list of choices but still allow a 
  87. user to enter or edit a choice that the application may not know in 
  88. advance.  One example is a font size field with an accompanying pop-up 
  89. menu of commonly used sizes.  The new standard pop-up menu appearance 
  90. leads itself readily to this use, as shown in Figure 4.
  91.  
  92.                  |-----|----||           |-----|+++++||
  93.            Size: |  9  | \/ ||     Size: |  9  |+/9++||
  94.                  |-----|====||           |-----|+++++||
  95.                                                | 10  ||
  96.                                                | 11  ||
  97.                                                | 12  ||
  98.                                                | 14  ||
  99.                                                | 24  ||
  100.                                                |=====||
  101.  
  102.             Figure 4-Pop-up menu with an editable text field
  103.  
  104. Note that as in standard pop-up menus, the black arrow disappears when a 
  105. user clicks on it and reappears when a user releases the mouse button.  
  106. Also note that an application should draw the pop-up menu so it 
  107. automatically highlights the item that corresponds to the value in the 
  108. edit text field; this technique prevents a quick click in the pop-up 
  109. menu from accidently erasing the previous value.
  110.  
  111. If a user enters a value in the edit text field that does not match any 
  112. of the pop-up menu's items, then the pop-up menu should make that value 
  113. the first item and separate it from the rest of the standard values with 
  114. a gray line., as shown in Figure 5.  This separation makes a clean 
  115. distinction between common items, which are always available, and the 
  116. user-entered value, which is only temporary.  (In the case of the 
  117. example in Figure 5, if the font size 13 had been inserted in order into 
  118. the list, a subsequent selection of 10, or any other matching selection, 
  119. would have removed it from the list.)
  120.  
  121.                  |-----|----||           |-----|+++++||
  122.            Size: | 13  | \/ ||     Size: | 13  |+/13+||
  123.                  |-----|====||           |-----|+++++||
  124.                                                |-----||
  125.                                                |  9  ||
  126.                                                | 10  ||
  127.                                                | 11  ||
  128.                                                | 12  ||
  129.                                                | 14  ||
  130.                                                | 24  ||
  131.                                                |=====||
  132.  
  133.        Figure 5-Pop-up menu with a non-matching edit text item
  134.